import QtQuick 2.15
import QtQuick.Controls 2.15

Item {
    id: root
    width: 220; height: 220
    property real value: 0
    property real minValue: 0
    property real maxValue: 100
    property string label: "参数"

    // 渐变底盘
    Rectangle {
        anchors.fill: parent
        radius: width/2
        gradient: Gradient {
            GradientStop { position: 0.0; color: "#e3eaf2" }
            GradientStop { position: 1.0; color: "#b0c4de" }
        }
        border.color: "#4a90e2"
        border.width: 2
    }
    // 刻度线
    Repeater {
        model: 11
        Rectangle {
            width: 4; height: 18
            radius: 2
            color: index % 5 === 0 ? "#4a90e2" : "#b0c4de"
            antialiasing: true
            x: root.width/2 + Math.cos(Math.PI + index * Math.PI/10) * 90 - width/2
            y: root.height/2 + Math.sin(Math.PI + index * Math.PI/10) * 90 - height/2
            rotation: 90 + index * 180/10
        }
    }
    // 刻度数字
    Repeater {
        model: 3
        Text {
            text: {
                if (index === 0) return root.minValue.toFixed(0);
                if (index === 1) return ((root.maxValue+root.minValue)/2).toFixed(0);
                return root.maxValue.toFixed(0);
            }
            font.pixelSize: 14
            color: "#357abd"
            anchors.centerIn: parent
            x: root.width/2 + Math.cos(Math.PI + index * Math.PI/2) * 70 - width/2
            y: root.height/2 + Math.sin(Math.PI + index * Math.PI/2) * 70 - height/2
        }
    }
    // 指针阴影
    Canvas {
        id: shadowCanvas
        anchors.fill: parent
        anchors.margins: 20
        z: 1
        onPaint: {
            var ctx = getContext("2d");
            ctx.clearRect(0, 0, width, height);
            var centerX = width/2;
            var centerY = height/2;
            var radius = Math.min(width, height)/2 - 10;
            var angle = Math.PI + (root.value-root.minValue)/(root.maxValue-root.minValue)*Math.PI;
            ctx.save();
            ctx.beginPath();
            ctx.moveTo(centerX, centerY);
            ctx.lineTo(centerX + radius*Math.cos(angle+0.03), centerY + radius*Math.sin(angle+0.03));
            ctx.lineWidth = 10;
            ctx.strokeStyle = "#8884";
            ctx.shadowColor = "#888";
            ctx.shadowBlur = 8;
            ctx.stroke();
            ctx.restore();
        }
    }
    // 指针
    Canvas {
        id: gaugeCanvas
        anchors.fill: parent
        anchors.margins: 20
        z: 2
        onPaint: {
            var ctx = getContext("2d");
            ctx.clearRect(0, 0, width, height);
            var centerX = width/2;
            var centerY = height/2;
            var radius = Math.min(width, height)/2 - 10;
            // 指针
            var angle = Math.PI + (root.value-root.minValue)/(root.maxValue-root.minValue)*Math.PI;
            ctx.save();
            ctx.beginPath();
            ctx.moveTo(centerX, centerY);
            ctx.lineTo(centerX + radius*Math.cos(angle), centerY + radius*Math.sin(angle));
            ctx.lineWidth = 6;
            ctx.strokeStyle = "#e94f4f";
            ctx.shadowColor = "#e94f4f";
            ctx.shadowBlur = 12;
            ctx.stroke();
            ctx.restore();
            // 圆心
            ctx.save();
            ctx.beginPath();
            ctx.arc(centerX, centerY, 10, 0, 2*Math.PI);
            ctx.fillStyle = "#4a90e2";
            ctx.shadowColor = "#357abd";
            ctx.shadowBlur = 8;
            ctx.fill();
            ctx.restore();
        }
    }
    // 标签
    Text {
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.top: parent.top
        anchors.topMargin: 18
        text: root.label
        font.pixelSize: 20
        color: "#222"
        z: 3
    }
    // 当前值
    Text {
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.bottom: parent.bottom
        anchors.bottomMargin: 32
        text: Number(root.value).toFixed(2)
        font.pixelSize: 28
        color: "#e94f4f"
        font.bold: true
        z: 3
    }
    Component.onCompleted: gaugeCanvas.requestPaint(); shadowCanvas.requestPaint()
    onValueChanged: gaugeCanvas.requestPaint(); shadowCanvas.requestPaint()
    onMinValueChanged: gaugeCanvas.requestPaint(); shadowCanvas.requestPaint()
    onMaxValueChanged: gaugeCanvas.requestPaint(); shadowCanvas.requestPaint()
} 